<template>
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">实时监测数据</text></view>
				</template>
				<uni-data-select v-model="select" :localdata="list" />
				<my-scroll style="height:620rpx">
					<my-grid :list="gridList" decimals="1" :col="2" imgWidth="60%" type="lr" class="m-t-10" />
				</my-scroll>
			</u-collapse-item>

			<u-collapse-item name="2">
				<template #title>
					<view class="content-item-title"><text class="title-txt">噪声</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>

			<u-collapse-item name="3">
				<template #title>
					<view class="content-item-title"><text class="title-txt">温度</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item>

			<u-collapse-item name="3">
				<template #title>
					<view class="content-item-title"><text class="title-txt">边坡监测</text></view>
				</template>

				<up-subsection :list="[{name:'GNSS'},{name:'测斜仪'}]" mode="subsection" :current="current"
					@change="fn4" />

				<my-table :data="tableList2" :columns="columns2" style="max-height:600rpx" class="m-t-10"></my-table>
			</u-collapse-item>

			<u-collapse-item name="4">
				<template #title>
					<view class="content-item-title"><text class="title-txt">今日告警列表</text></view>
				</template>
				<my-table :data="tableList" :columns="columns"></my-table>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	import {
		getApiFabric,
	} from "@/api/customApi";

	const collapse = ref(null),
		showMoreKeys = ref([1, 2, 3, 4]);

	/*********************************************实时监测数据**********************************/
	const list = ref([]),
		select = ref(''),
		gridList = ref([{
			img: 'work/hjjc/pm2.5.png',
			key: 'pm25',
			title: 'PM2.5',
			value: '0',
			unit: "μg/m³"
		}, {
			img: 'work/hjjc/tsp.png',
			key: 'tsp',
			title: '悬浮颗粒',
			value: '0',
			unit: "μg/m³"
		}, {
			img: 'work/hjjc/wd.png',
			key: 'tem',
			title: '温度',
			value: '0',
			unit: '℃'
		}, {
			img: 'work/hjjc/fl.png',
			key: 'wp',
			title: '风力',
			value: '0',
			unit: ''
		}, {
			img: 'work/hjjc/dqy.png',
			key: 'atm',
			title: '大气压',
			value: '0',
			unit: 'kPa'
		}, {
			img: 'work/hjjc/1yht.png',
			key: 'co',
			title: '一氧化碳',
			value: '0',
			unit: ''
		}, {
			img: 'work/hjjc/2yht.png',
			key: 'no2',
			title: '二氧化氮',
			value: '0',
			unit: ''
		}, {
			img: 'work/hjjc/bfw.png',
			key: 'wd8',
			title: '风向(八方位)',
			value: '0',
			unit: ''
		}, {
			img: 'work/hjjc/pm10.png',
			key: 'pm10',
			title: 'PM10',
			value: '0',
			unit: 'μg/m³'
		}, {
			img: 'work/hjjc/zs.png',
			key: 'noise',
			title: '噪声',
			value: '0',
			unit: 'dB'
		}, {
			img: 'work/hjjc/sd.png',
			key: 'hum',
			title: '湿度',
			value: '0',
			unit: '%RH'
		}, {
			img: 'work/hjjc/fs.png',
			key: 'ws',
			title: '风速',
			value: '0',
			unit: 'm/s'
		}, {
			img: 'work/hjjc/tq.png',
			key: 'lux',
			title: '光照强度',
			value: '0',
			unit: ''
		}, {
			img: 'work/hjjc/2yhl.png',
			key: 'so2',
			title: '二氧化硫',
			value: '0',
			unit: ''
		}, {
			img: 'work/hjjc/cy.png',
			key: 'o3',
			title: '臭氧',
			value: '0',
			unit: ''
		}, {
			img: 'work/hjjc/fx.png',
			key: 'wd360',
			title: '风向360°',
			value: '0',
			unit: '°'
		}]);

	watch(select, () => {
		fn1()
	})

	function fn() {
		getApiFabric({
			apiCode: "58118f5e-4aa5-43f6-b022-af09980ed26f",
			propertyMapping: {
				text: "devName",
				value: "devName"
			}
		}).then((res) => {
			list.value = res.data || [];
			if (list.value[0]?.value) select.value = list.value[0].value;
		});
	}

	function fn1() {
		getApiFabric({
			apiCode: "e1055e39-db57-4f48-850b-6ff1bcba1fba",
			params: [{
				code: "deviceName",
				value: select.value,
			}],
			propertyMapping: {
				key: "factor",
				val: "val",
				unit: "unit"
			},
		}).then((res) => {
			if (res.data) {
				const data = ArrayToObj(res.data)
				gridList.value.forEach(item => {
					item.value = data[item.key]
				})
				nextTick(() => {
					collapse.value.init();
				})
			}
		});
	}

	/*********************************************噪声**********************************/
	const opts1 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [0, 10, 10, 0],
			dataLabel: false,
			legend: {
				show: true,
				position: "top",
				fontSize: 12,
				margin: 10,
			},
			xAxis: {
				disableGrid: true,
				calibration: true,
				labelCount: 12,
				fontSize: 10
			},
			yAxis: {
				showTitle: false,
				gridType: "dash",
				fontSize: 10,
			},
			extra: {
				line: {
					type: "curve",
					width: 2,
					activeType: "hollow",
					linearType: "custom",
					onShadow: true,
					animation: "horizontal"
				},
			},
		},
		chartData1 = ref({})

	function fn2() {
		getApiFabric({
			apiCode: "8ea2c25b-36fe-48d5-b004-959e39fcec4c",
			propertyMapping: {
				x: "name",
				y: "val",
				s: "devName"
			}
		}).then((res) => {
			const resData = res.data?.reduce((prev, cur) => {
				if (!prev.categories.includes(cur.x.slice(10, 13))) prev.categories.push(cur.x.slice(10,
					13));
				if (!prev.series[cur.s]) prev.series[cur.s] = [];
				prev.series[cur.s].push(cur.y)
				return prev;
			}, {
				categories: [],
				series: {}
			})

			let series = [];
			for (let [name, data] of Object.entries(resData?.series || [])) {
				series.push({
					name,
					data
				})
			}
			chartData1.value = {
				categories: resData?.categories || [],
				series
			}
		});
	};

	/*********************************************噪声**********************************/
	const opts2 = {
			...opts1
		},
		chartData2 = ref({})

	function fn3() {
		getApiFabric({
			apiCode: "dab842b0-d7e6-4c0f-8a28-5e7b78e34fae",
			propertyMapping: {
				x: "name",
				y: "val",
				s: "devName"
			},

		}).then((res) => {
			const resData = res.data?.reduce((prev, cur) => {
				if (!prev.categories.includes(cur.x.slice(10, 13))) prev.categories.push(cur.x.slice(10,
					13));
				if (!prev.series[cur.s]) prev.series[cur.s] = [];
				prev.series[cur.s].push(cur.y)
				return prev;
			}, {
				categories: [],
				series: {}
			})

			let series = [];
			for (let [name, data] of Object.entries(resData?.series || [])) {
				series.push({
					name,
					data
				})
			}
			chartData2.value = {
				categories: resData?.categories || [],
				series
			}
		});
	};

	/******************************************************************边坡监测**************************************************/
	const current = ref(0),
		tableList2 = ref([]),
		columns2 = [{
			label: '设备名称',
			prop: '设备名称',
			width: 100,
		}, {
			label: 'x偏移量',
			prop: 'x偏移量',
			width: 80,
		}, {
			label: 'y偏移量',
			prop: 'y偏移量',
			width: 80,
		}, {
			label: 'z偏移量',
			prop: 'z偏移量',
			width: 80,
		}]

	function fn4(index = 0) {
		current.value = index;
		getApiFabric({
			apiCode: ["2fafa926-8ca6-482c-97aa-e780c78f9e05", '41523fbc-8055-4b46-bb4e-1e7fa9f6d8c3'][current
				.value
			],
			propertyMapping: {
				设备名称: "name",
				x偏移量: "x",
				y偏移量: "y",
				z偏移量: "z"
			}
		}).then((res) => {
			tableList2.value = res.data
			nextTick(() => {
				collapse.value.init();
			})
		});
	}

	/******************************************************************告警信息**************************************************/
	const tableList = ref([]),
		columns = [{
			label: '设备名称',
			prop: 'deviceName',
		}, {
			label: '告警类别',
			prop: 'alarmtype',
		}, {
			label: '告警时间',
			prop: 'strtime',
		}]

	function fn5() {
		getApiFabric({
			apiCode: "a255e5d9-3c3b-42b9-b8fd-1da814dcf1d3",
			pageIndex: 1,
			pageSize: 15,
			params: [{
				code: "pageIndex",
				value: 1
			}, {
				code: "pageSize",
				value: 15
			}, {
				code: "total",
				value: true
			}],
			propertyMapping: {
				设备名称: "deviceName",
				告警类别: "alarmType",
				告警时间: "strtime"
			},
			total: true
		}).then((res) => {
			tableList.value = res.data
			nextTick(() => {
				collapse.value.init();
			})
		});
	}

	function getServerData(refresh) {
		Promise.all([fn(), fn1(), fn2(), fn3(), fn4(), fn5()]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh()
				})
			}
		});
	}

	onShow(() => {
		getServerData()
	})

	onPullDownRefresh(() => {
		getServerData(true)
	})
</script>